<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Danmaku Example</title>
        <link rel="stylesheet" href="/release/mui-player/dist/mui-player.min.css">
        <script src="./static/js/config.js"></script>
        <script src="/release/mui-player/dist/mui-player.min.js"></script>

        <link rel="stylesheet" href="./static/css/CommentCoreLibrary.min.css">
        <script src="./static/js/CommentCoreLibrary.min.js"></script>
    </head>
    
	<body>
        <h3 style="text-align: center;">Danmaku Example</h3>
        <div id="mui-player" class='abp' style="background-color: black;">
            <div id='my-comment-stage' class='container' style="z-index: 1 !important;height: 350px;width: 100%;"></div>
        </div><br/>

        <button onclick="triggerSend()">CM Send</button>
        <button onclick="trigger_stop()">触发 - Stop</button>
        <button onclick="trigger_start()">触发 - Start</button>
    </body>
    
    <script>
        // Danmaku
        var CM = new CommentManager(document.getElementById('my-comment-stage'));
        CM.init();

        // Player
        var config = window.playerConfig;
        var mp = new MuiPlayer(config);
        mp.on('ready',function(e) {
            console.log(mp.video());

            mp.video().addEventListener('play',function() {
                CM.start();
            })

            mp.video().addEventListener('pause',function() {
                CM.stop();
            })
        });
        

        function triggerSend() {
            var comment = {
                'text': "哇，好好看~",
                'mode': 1,
                "size":28,
                'color': 0xffffff,
            };

            CM.send(comment);
        }
        triggerSend();

        function trigger_start() {
            CM.start();
        }

        function trigger_stop() {
            CM.stop();
        }
    </script>
</html>